import React, { Component } from 'react';
import moment from 'moment';
import { Col, Row } from 'antd';
import { messages } from 'share/common';
import MileageModal from './mileage-modal';
import Condition from 'components/condition';
import MileageIcon from 'images/expense-detail/mileage.svg';
import ApportionIcon from 'images/expense-detail/apportion.svg';
import amortiseIcon from 'images/expense-detail/apportion.svg';

const { If } = Condition;

export default (WrappedComponent) => {

  class ExpenseTableHoc extends Component {

    static contextTypes = {
      currentExpense: React.PropTypes.object,
      currentExpenseType: React.PropTypes.object,
    };

    handleTableDate = () => {
      const { randomHash } = this.props;
      let { currentExpense: { expenseApportion = [], mileageAllowanceExpenseV2DTO, erApportionEnabled, expenseAmortise }, currentExpenseType: { erAmortiseEnabled } } = this.context,
        tableData = [];
      if ((expenseApportion[0] && erApportionEnabled) || expenseApportion.some(item => item.applicationApportionmentId)) {
        tableData.push({
          data: expenseApportion,
          icon: {
            src: ApportionIcon,
            name: messages('expense-1.key209')/*费用分摊*/
          },
          tableFlag: 'apportion',
          randomHash
        });
      }
      if (mileageAllowanceExpenseV2DTO && mileageAllowanceExpenseV2DTO.carOrderMode === 9002) {
        tableData.push({
          data: mileageAllowanceExpenseV2DTO.mileageAllowanceOrders || [],
          icon: {
            src: MileageIcon,
            name: messages('expense-1.key676')/*里程补贴*/
          },
          tableFlag: 'mileage',
          keyFlag: 'mileageDetail',
          expandedRowRender: this.renderExpanded,
          rowClassName: record => (record.viaPoints || []).length > 0 ? '' : 'row-expand-display-none',
          onRow: record => ({ onClick: () => this.onRowClick(record) }),
          randomHash
        });
      }
      if (erAmortiseEnabled && expenseAmortise && expenseAmortise[0]) {
        tableData.push({
          data: expenseAmortise || [],
          icon: {
            src: amortiseIcon,
            name: messages('expense-1.key315')/*费用摊销*/
          },
          tableFlag: 'amortise',
          randomHash
        });
      }
      return tableData;
    };

    onRowClick = (record) => {
      const { currentExpense: { mileageAllowanceExpenseV2DTO } } = this.props;
      MileageModal.open({
        record,
        mileageAllowance: mileageAllowanceExpenseV2DTO
      }, this).finally(() => {});
    };

    renderExpanded = (record) => {
      return record['viaPoints'] && record['viaPoints'][0]
        ? (
          <section className="mileage-point">
            {
              record['viaPoints'].map(value =>
                <Row className="mileage-point-row">
                  <Col span={4}>
                    {moment(value.arrivalTime)
                      .format('YYYY-MM-DD HH:mm:ss')}
                  </Col>
                  <Col span={10}>
                    {value.place}
                  </Col>
                  <If value={value.originPoint}>
                    <Col span={10} className="mileage-point-row_origin">
                      {messages('expense-1.key141')/*[原定位]*/} {value.originPoint && JSON.parse(value.originPoint).place}
                    </Col>
                  </If>
                </Row>
              )}
          </section>
        )
        : null;
    };

    render() {
      const { currentExpense: { expenseApportion = [], mileageAllowanceExpenseV2DTO }, } = this.context;
      return (
        <div>
          {
            (expenseApportion[0] || mileageAllowanceExpenseV2DTO)
              ? this.handleTableDate().map(item => (<WrappedComponent{...item}/>))
              : null
          }
        </div>
      );
    }
  }

  return ExpenseTableHoc;
}

